<template>
    <view style="background: #F5F5F5;padding: 20px 0 20px 0;">
        <view class="forlist" v-for="(item,index) in transArr" :key="index">
            <view class="linefirst">
                <image v-if="isAllimg=='1'" class="lnlef" :src="item.url"></image>
                <image v-else class="lnlef" :src="imagl"></image>
                <view class="yous">
                    <view class="">
                        <view class="cnkd">
                            <view class="buys" style="color: #D63E5D;">
                                {{item.subUserId}}
                            </view>
                            <view class="doge">
                                {{item.destinationCoin}}/
                            </view>
                            <view class="usdt">
                                {{item.sourceCoin}}
                            </view>
							<view class="">
							    <view class="buy" v-if="item.direction=='buy'">
							        {{item.leverRate}}X·多
							    </view>
							    <view class="sell" v-if="item.direction=='sell'">
							        {{item.leverRate}}X·空
							    </view>
							</view>
                        </view>
                        <view class="datetime">
                            时间：{{item.createTime}}
                        </view>
                    </view>
					<image v-if="item.exchangeType=='0'" src="../../static/img/ind0.png"></image>
                    <image v-if="item.exchangeType=='1'" src="../../static/img/hpt.png"></image>
                    <image v-if="item.exchangeType=='2'" src="../../static/img/ind1.png"></image>
                </view>
            </view>
            <view class="cldz" v-if="item.transType=='1'">
				<view class="fldt">
				    <text class="leftcon">用户名：</text>
				    <text class="rightcon">{{item.subNickname}}</text>
				</view>
                <view class="fldt">
                    <text class="leftcon">订单号：</text>
                    <text class="rightcon">{{item.exchangeOrderId}}</text>
                </view>
                <view class="fldt">
                    <text class="leftcon">平仓数量：</text>
                    <text class="rightcon">{{item.completeAmount}}</text>
                </view>
                <view class="fldt">
                    <text class="leftcon">平仓费用：</text>
                    <text class="rightcon">{{item.completeMoney}}</text>
                </view>
                <view class="fldt">
                    <text class="leftcon">平仓均价：</text>
                    <text class="rightcon">{{item.completeAvePrice}}</text>
                </view>
                <view class="fldt">
                    <text class="leftcon">手续费：</text>
                    <text class="rightcon">{{item.fee}}</text>
                </view>
                <view class="fldt">
                    <text class="leftcon">本次盈利：</text>
                    <text class="rightcon">{{item.profit}}</text>
                </view>
				<view class="fldt">
				    <text class="leftcon">抵扣点卡：</text>
				    <text class="rightcon">{{item.deletePoint}}</text>
				</view>
				<view class="fldt">
				    <text class="leftcon">点卡余额：</text>
				    <text class="rightcon">{{item.restPoint}}</text>
				</view>
				<view class="fldt">
				    <text class="leftcon">返佣比例：</text>
				    <text class="rightcon">{{(item.rebateRatio * 100).toFixed(2)}}%</text>
				</view>
				<view class="fldt">
				    <text class="leftcon">返佣金额：</text>
				    <text class="rightcon">{{item.rebateAmount}}</text>
				</view>
				<view class="fldt">
				    <text class="leftcon">结算状态：</text>
				    <text class="rightcon" style="color: #00aa00;" v-if="item.getRebate==0">该笔佣金已结算</text>
					<text class="rightcon" style="color: #D63E5D;" v-if="item.getRebate==1">该笔佣金未结算</text>
				</view>
				<view class="fldt">
				    <text class="leftcon">备注：</text>
				    <text class="rightcon">{{item.note}}</text>
				</view>
            </view>
        </view>
        <wyb-popup ref="popup" type="top" height="890" width="500">
            <view class="popupcontent">
                <view class="orderstatus">
                    订单状态
                </view>
                <view class="threebtn">
                    <view class="thres" v-for="(item,index) in orderSta" :key="index" :id="item.val" :data-index="index"
                        :class="active==index?'addcla':''" @click="tabFn">
                        {{item.name}}
                    </view>
                </view>
                <view class="orderstatus">
                    交易所
                </view>
                <input type="text" v-model="formsObj.jys" placeholder="请输入交易所的名称" />
                <view class="orderstatus">
                    交易币对查询
                </view>
                <input type="text" v-model="formsObj.jyb" placeholder="请输入交易币对" />
                <view class="tipes">
                    如查询BTC/USDT,请填写btcusdt
                </view>
                <view class="orderstatus">
                    时间
                </view>
                <view class="unilistcell">
                    <picker mode="date" :value="date" @change="bindDateChange">
                        <view class="uni-input">{{date}}</view>
                    </picker>
                    <text>至</text>
                    <picker mode="date" :value="dateend" @change="bindDateChangeEnd">
                        <view class="uni-input">{{dateend}}</view>
                    </picker>
                </view>
                <view class="twobtnfs">
                    <view class="obtnone" @click="resetsBtnfn">重置</view>
                    <view class="obtntwo" @click="okqreBtn">确认</view>
                </view>
            </view>
        </wyb-popup>
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
        <view v-show="isLoadMore">
            <uni-load-more :status="loadStatus"></uni-load-more>
        </view>
    </view>
</template>

<script>
    let uinfo;
    import uniLoadMore from '../../components/uni-load-more.vue';
    import request from "../../untils/request.js";
    import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import backTop from '../../components/back-top/back-top.vue';
    export default {
        components: {
            wybPopup,uniLoadMore,backTop
        },
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
        data() {
            const currentDate = this.getDate({
                format: true
            })
            const currentDateedd = this.getDate({
                format: true
            })
            return {
				scrollTop: 0,
				backTop: {
					src: '../../static/top.png',
					scrollTop: 0
				},
                active: 0,
                orderSta: [{
                    name: '全部',
                    val: ''
                }, {
                    name: '开仓',
                    val: '0'
                }, {
                    name: '平仓',
                    val: '1'
                }],
                isbuy: false,
                date: currentDate,
                dateend: currentDateedd,
                formsObj: {
                    stas: null,
                    jys: null,
                    jyb: null,
                    datatart: null,
                    datatend: null,
                },
                transArr: [],
                chobj: {},
                imagl: '',
                isAllimg: '',
                loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore: false, //是否加载中
                page: '1',
                limt: '10'
            }
        },
        
        //筛选
        onNavigationBarButtonTap: function(e) {
            /* this.$refs.popup.show() // 显示
            this.date = '';
            this.dateend = ''; */
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        onLoad(options) {
            uinfo = uni.getStorageSync('userInfo');
            this.isAllimg = options.a;
            if (options.a == '1') {
                this.chobj = {
                    userId: uinfo.userId,
                    sortType: 'descend', //排序类型 升序:ascend 降序:descend ,
                    sortAttribute: '9',
                    pageSize: '10',
                    pageNumber: this.page,
					direction: options.direction//多空方向
                }
            } else {
                this.imagl = options.imgurl;
                this.chobj = {
                    pageSize: '10',
                    pageNumber: this.page,
                    userId: uinfo.userId,
                    destinationCoin: options.dest, //交易对目标币种 ,
                    exchangeType: options.exch, //交易所类型(0.okex 1.huobi 2.binance) ,
                    sourceCoin: options.sourc,
                    sortType: 'descend', //排序类型 升序:ascend 降序:descend ,
                    sortAttribute: '9', //排序属性 1:下单数量 2:下单限价 3:成交数量 4:成交金额 5:成交均价 6:手续费 7:补仓次数 8:盈利 9:创建时间 10:更新时间 ,
                    direction: options.direction //多空方向
				}
            }

            this.cordList();
        },
        onReachBottom() { //上拉触底函数
            if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
                this.isLoadMore = true;
                this.page++;
                this.page = this.page.toString()
                this.chobj.pageNumber=this.page;
                this.cordList();
            }
        },
        onPullDownRefresh() {
            console.log('refresh');
			this.chobj.pageNumber='1';
			this.page = 1;
            this.cordList();
        },
        methods: {
            //交易记录
            cordList() {
                request.postAssets('/assets/rebateRecord/queryRebateRecord', this.chobj).then(res => {
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        if(res.data.items.length>0){
							if(this.chobj.pageNumber == '1'){
								this.transArr = res.data.items;
							}else{
							    this.transArr = this.transArr.concat(res.data.items);	
							}
                            //如果最后一页小于20个
                            if (res.data.items.length < this.limt) {
                                this.isLoadMore = true;
                                this.loadStatus = 'nomore';
                            } else {
                                this.isLoadMore = false;
								this.loadStatus = 'more';
                            }
                        }else{
                            this.isLoadMore = true;
                            this.loadStatus = 'nomore';
                        }
                    } else {
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            //筛选确认
            okqreBtn() {
                let valdata = {};
                if (this.formsObj.stas == '') {
                    valdata = {
                        userId: uinfo.userId,
                        exchangeType: this.formsObj.jys,
                        sourceCoin: this.formsObj.jyb,
                        createTimeEnd: this.formsObj.datatart,
                        createTimeStart: this.formsObj.datatend
                    }
                } else {
                    valdata = {
                        userId: uinfo.userId,
                        transType: this.formsObj.stas,
                        exchangeType: this.formsObj.jys,
                        sourceCoin: this.formsObj.jyb,
                        createTimeEnd: this.formsObj.datatart,
                        createTimeStart: this.formsObj.datatend
                    }
                }

                request.postAssets('/assets/rebateRecord/queryRebateRecord', {
                    userId: uinfo.userId,
                    transType: this.formsObj.stas,
                    exchangeType: this.formsObj.jys,
                    sourceCoin: this.formsObj.jyb,
                    createTimeEnd: this.formsObj.datatart,
                    createTimeStart: this.formsObj.datatend
                }).then(res => {
                    if (res.code == '200') {
                        this.$refs.popup.hide();
                        this.transArr = [];
                        this.transArr = res.data.items;
                        console.log(this.transArr)
                        uni.showToast({
                            icon: "none",
                            title: res.message
                        });
                    } else {
                        this.$refs.popup.hide();
                        uni.showToast({
                            icon: "none",
                            title: res.message
                        });
                    }
                })
            },
            //重置
            resetsBtnfn() {
                Object.keys(this.formsObj).map(key => {
                    this.formsObj[key] = "";
                })
            },
            tabFn(e) {
                //下标
                let inde = e.currentTarget.dataset.index || e.target.dataset.index;
                this.active = inde;
                //当前val
                let valid = e.currentTarget.id || e.target.id;
                this.formsObj.stas = valid;
            },
            //日期选择器-开始
            bindDateChange: function(e) {
                this.date = e.target.value;
                this.formsObj.datatart = this.date;
            },
            //日期选择器-结束
            bindDateChangeEnd: function(e) {
                this.dateend = e.target.value;
                this.formsObj.datatend = this.dateend;
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            }
        }
    }
</script>

<style>
    .forlist {
        width: 710rpx;
        background: #FFFFFF;
        border-radius: 10px;
        margin: 0 auto 10px;
        padding: 0 0 20rpx 0;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    }

    .linefirst {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .linefirst .lnlef {
        width: 104rpx;
        height: 52px;
        margin: 25px 0 0 10px;
    }

    .linefirst .yous {
        display: flex;
        width: 535rpx;
        margin: 25px 10px 0 0;
        justify-content: space-between;
        padding: 0 0 10px 0;
    }

    .linefirst .yous .cnkd {
        display: flex;
        align-items: center;
    }

    .linefirst .yous image {
        width: 33px;
        height: 33px;
        margin: 0 10px 0 0;
    }

    .linefirst .yous .buys {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 21px;
        color: #019D20;
        margin: 0 10px 0 0;
    }

    .linefirst .yous .doge {
        font-size: 18px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 26px;
        color: #333333;
    }

    .linefirst .yous .usdt {
        font-size: 14px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 20px;
        color: #ADB0BB;
		margin-right: 25px;
    }

    .linefirst .yous .datetime {
        font-size: 14px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 21px;
        color: #838AA4;
    }

    .forlist .cldz {
        margin: 0 0 5px 156rpx;
    }

    .forlist .cldz .leftcon {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 21px;
        color: #ADB0BB;
        display: inline-block;
        width: 70px;
    }

    .forlist .cldz .rightcon {
        font-size: 14px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 21px;
        color: #333333;
    }

    .popupcontent {
        margin: 0 0 0 10px;
        position: relative;
    }

    .popupcontent .orderstatus {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 21px;
        color: #333333;
        margin: 20px 0;
    }

    .popupcontent .threebtn {
        display: flex;
        justify-content: space-between;
        margin: 0 30px 0 0;
    }

    .popupcontent .threebtn .thres {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 40rpx;
        color: #333333;
        font-weight: bold;
        padding: 3px 18px;
        border-radius: 14px;
        background: #F1F2F6;
    }

    .popupcontent .threebtn .addcla {
        color: #FFFFFF;
        background: #7F6AC3;
    }

    .popupcontent input {
        width: 245px;
        height: 36px;
        background: #F1F2F6;
        padding: 0 0 0 10px;
        border-radius: 18px;
        font-size: 14px;
    }

    .popupcontent .tipes {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 21px;
        color: #ADB0BB;
    }

    .popupcontent .unilistcell {
        display: flex;
        font-size: 14px;
        color: #ADB0BB;
        align-items: center;
    }

    .popupcontent .unilistcell picker {
        background: #F1F2F6;
        padding: 6px 16px;
        border-radius: 18px;
        width: 160rpx;
        height: 36rpx;
    }

    .popupcontent .unilistcell text {
        margin: 0 20px;
    }

    .twobtnfs {
        display: flex;
        margin: 90rpx 0 0 -10px;
    }

    .twobtnfs view {
        width: 50%;
        height: 48px;
        font-size: 14px;
        line-height: 48px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        text-align: center;
    }

    .twobtnfs .obtnone {
        color: #333333;
        background: #F1F2F6;
    }

    .twobtnfs .obtntwo {
        color: #FFFFFF;
        background: #7F6AC3;
    }
	
	.buy {
	    font-size: 17px;
	    font-weight: 400;
	    color: #008800;
	}
	
	.sell {
	    font-size: 17px;
	    font-weight: 400;
	    color: #D63E5D;
	}
</style>
